<template lang="html">
  <div class="login">
    <v-header>
      <h1 slot="title">登录</h1>
    </v-header>
    <section>
      <mt-field
        label="账号"
        placeholder="请输入账号"
        type="text"
        v-model="account"
        :readonly="!toggle"
        :disableClear="!toggle"
      ></mt-field>
      <mt-field
        label="密码"
        placeholder="请输入密码"
        type="password"
        v-model="password"
        :readonly="!toggle"
        :disableClear="!toggle"
      ></mt-field>
      <p class="tip">Tip : 账号必须是4-8位英文字符 密码必须是6-12位数字/字母</p>
    </section>
    <mt-button plain size="large" @click="login" v-if="toggle">登录</mt-button>
    <mt-button plain size="large" @click="logout" v-else>退出登录</mt-button>
    <router-link to="/registered">
      <mt-button plain size="large" v-show="toggle">前往注册</mt-button>
    </router-link>
  </div>
</template>

<script>
import Header from "@/common/_header.vue";
import userMode from "../http/user";
import { Toast } from "mint-ui";
export default {
  components: {
    "v-header": Header,
  },
  data() {
    return {
      account: "",
      password: "",
      toggle: !this.$store.state.login.token,
    };
  },
  methods: {
    // 登录按钮
    async login() {
      let accountRrg = /^[a-z]{4,8}$/i;
      let pwdReg = /^[a-z0-9]{6,12}$/i;
      if (
        this.account !== "" &&
        this.password !== "" &&
        accountRrg.test(this.account) &&
        pwdReg.test(this.password)
      ) {
        let res = await userMode.query({
          name: this.account,
          pwd: this.password,
        });
        if (res.data.length) {
          Toast("登录成功!");
          this.toggle = false;
          this.$store.commit("CHANGE_TOKEN", 1);
        }else{
          Toast('用户名或密码错误');
        }
      } else {
        Toast("账号或密码不符合规范！");
        // console.log(this.account);
        // console.log(this.password);
        // console.log(accountRrg.test(this.account));
        // console.log(pwdReg.test(this.password))
      }

      setTimeout(() => {
        this.$router.replace({
          path: "user",
        });
      }, 1000);
      // 登录成
    },

    //退出登录按钮
    logout() {
      Toast("退出登录成功,清除token");
      this.$store.commit("CHANGE_TOKEN", 0);
      this.toggle = true;
      this.account = "";
      this.password = "";
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  > section {
    .tip {
      padding: 6vw 3vw;
      color: rgb(224, 145, 71);
      letter-spacing: 2px;
      font-size: 16px;
    }
  }
}
</style>
